<template>
    <el-dialog class="addDefData" :title="'添加【'+ tableName +'】下的列配置'" :visible.sync="defDataDialogFormVisible" v-if="defDataDialogFormVisible" width="80%" top="8vh" :before-close="handleDefDataCancel" :close-on-click-modal="false" v-dialogDrag>
      <el-form :model="defDataForm" :rules="defDialogFormRules" ref="defDataForm" label-width="120px">
        <div class="item">
          <el-form-item label="列属性" prop="field">
            <el-input v-model="defDataForm.field"></el-input>
          </el-form-item>
          <el-form-item label="最小列宽" prop="minWidth">
            <el-input v-model="defDataForm.minWidth" maxlength="3"></el-input>
          </el-form-item>
          <el-form-item label="对齐方式" prop="align">
            <el-select v-model="defDataForm.align" placeholder="请选择" clearable>
              <el-option v-for="item in alignOptions" :key="item.value" :label="item.text" :value="item.value">
                <span class="txt">{{ item.text }}</span>
                <span class="val">{{ item.value }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="格式化类型" prop="formatType">
            <el-select v-model="defDataForm.formatType" placeholder="请选择" clearable @change="changeFormatType">
              <el-option v-for="item in formatTypeOptions" :key="item.value" :label="item.text" :value="item.value">
                <span class="txt">{{ item.text }}</span>
                <span class="val">{{ item.value }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否可见" prop="visiable">
            <el-radio v-model="defDataForm.visiable" :label="item.value" v-for="item in sortableOptions" :key="item.value">{{item.text}}</el-radio>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="列名称" prop="title">
            <el-input v-model="defDataForm.title"></el-input>
          </el-form-item>
          <el-form-item label="固定方位" prop="fixed">
            <el-select v-model="defDataForm.fixed" placeholder="请选择" clearable>
              <el-option v-for="item in fixedOptions" :key="item.value" :label="item.text" :value="item.value">
                <span class="txt">{{ item.text }}</span>
                <span class="val">{{ item.value }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="列是否排序" prop="sortable">
            <el-radio v-model="defDataForm.sortable" :label="item.value" v-for="item in sortableOptions" :key="item.value">{{item.text}}</el-radio>
          </el-form-item>
          <el-form-item label="格式化参数" prop="formatValue" v-show="defDataForm.formatType">
            <el-input-number controls-position="right" v-model="defDataForm.formatValue" :min="0" :max="11" v-if="defDataForm.formatType == 'DECIMAL'"></el-input-number>
            <el-select v-model="defDataForm.formatValue" placeholder="请选择" v-if="defDataForm.formatType == 'DATETIME'">
              <el-option v-for="item in timeOptions" :key="item.value" :label="item.text" :value="item.value">
                <span class="txt">{{ item.text }}</span>
                <span class="val">{{ item.value }}</span>
              </el-option>
            </el-select>
            <el-select
                ref="zryyRef"
                v-model="defDataForm.formatValue"
                filterable
                remote
                reserve-keyword
                placeholder="请搜索"
                :remote-method="remoteMethodFormatValue"
                :loading="formatValueloading"
                v-if="defDataForm.formatType == 'DICT'"
              >
                <el-option v-for="item in dictOptions" :key="item.value" :label="item.text" :value="item.value">
                  <span class="txt">{{ item.text }}</span>
                  <span class="val">{{ item.value }}</span>
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="排序" prop="sortOrder">
            <el-input-number controls-position="right" v-model="defDataForm.sortOrder" :min="1" :max="999"></el-input-number>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleDefDataCancel">取 消</el-button>
        <el-button size="medium" type="primary" @click="handleDefDataSubmit">确 定</el-button>
      </div>
    </el-dialog>
</template>
<script>
import { addDefColumn } from '@/api/tools/columnInfo.js';
import { getDictCombo, getDictTypeCombo } from '@/api/tools/dict.js';
import { validatenum } from '@/utils/validate';
export default {
    data() {
        const checkMinWidth = (rule, value, callback) => {
          if (value) {
            let res = validatenum(value, 2)
            if (res) {
              callback(new Error('必须是整数'))
            } else {    
              callback()
            }
          } else {
            callback('最小列宽不能为空')
          }         
        }
        return {
          tableName: '',
          defDataDialogFormVisible: false,
          defDataForm: {
            field: '', // 列属性
            title: '', // 列名称
            minWidth: '100', // 最小列宽
            fixed: '', // 固定方位
            align: 'center', // 对齐方式
            sortable: '0', // 列是否排序
            formatType: '', // 格式化类型
            formatValue: '', // 格式化参数
            visiable: '1', // 是否可见
            sortOrder: 1, // 排序
            tableCode: '', // 列表编号
            id: '' // id
          },
          defDialogFormRules: {
            field: [{
              required: true,
              message: '列属性不能为空',
              trigger: 'blur'
            }],
            title: [{
              required: true,
              message: '列名称不能为空',
              trigger: 'blur'
            }],
            minWidth: [{
              required: true,
              validator: checkMinWidth,
              trigger: 'blur'
            }]
          },
          alignDict: 'dict_tools_dqfs', // 对齐方式字典分类值
          fixedDict: 'dict_tools_gdfw', // 固定方位字典分类值
          formatTypeDict: 'dict_tools_args_type', // 格式化类型字典分类值
          sortableDict: 'dict_tools_sfpx', // 列是否排序字典分类值
          visiableDict: 'dict_tools_sfkj', // 是否可见字典分类值
          timeDict: 'dict_tools_time_type', // 时间类型字典分类值
          alignOptions: [], // 对齐方式下拉框数据
          fixedOptions: [], // 固定方位下拉框数据
          formatTypeOptions: [], // 格式化类型下拉框数据
          sortableOptions: [], // 列是否排序下拉框数据
          visiableOptions: [], // 是否可见下拉框数据
          timeOptions: [], // 时间类型下拉框数据
          formatValueloading: false, // 格式化类型为字典时---格式化参数模糊查询时的loading
          dictOptions: [], // 格式化类型为字典时---格式化参数模糊查询时的options
          dictlist: [] //格式化类型为字典时---格式化参数下拉列表所有
        }
    },
    props: {
      propAddData: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      propAddData: {
        deep: true,
        handler(newVal, oldVal) {
          if (newVal.defDataDialogFormVisible) {
            const that = this
            that.defDataDialogFormVisible = newVal.defDataDialogFormVisible
            that.defDataForm.tableCode = newVal.tableCode
            that.defDataForm.sortOrder = newVal.len
            that.defDataForm.minWidth = '100'
            that.tableName = newVal.tableName
          }
        }
      }
    },
    created() {
      const that = this
      let pam1 = {
        typeCode: that.alignDict
      }
      let pam2 = {
        typeCode: that.fixedDict
      }
      let pam3 = {
        typeCode: that.formatTypeDict
      }
      let pam4 = {
        typeCode: that.sortableDict
      }
      let pam5 = {
        typeCode: that.visiableDict
      }
      let pam6 = {
        typeCode: that.timeDict
      }
      let res1 = getDictCombo(pam1)
      let res2 = getDictCombo(pam2)
      let res3 = getDictCombo(pam3)
      let res4 = getDictCombo(pam4)
      let res5 = getDictCombo(pam5)
      let res6 = getDictCombo(pam6)
      Promise.all([res1, res2, res3, res4, res5, res6]).then(result => {
        that.alignOptions = result[0].data
        that.fixedOptions = result[1].data
        that.formatTypeOptions = result[2].data
        that.sortableOptions = result[3].data
        that.visiableOptions = result[4].data
        that.timeOptions = result[5].data
      }).catch(reason => {
        console.log(reason)
      })
      that.getDictTypeList()   
    },
    methods: {
      /** 改变格式化类型 */
      changeFormatType() {
        this.defDataForm.formatValue = ''
      },

      /** 获取所有的字典分类 */
      getDictTypeList() {
        const that = this
        let pam = {
          keySearch: ''
        }
        getDictTypeCombo(pam).then(res => {
          if (res.code == 0) {
            let newData = []
            console.log(res)
            res.data.forEach((item, index) => {
              let obj = {
                value: item.value,
                text: item.text,
              }
              newData.push(obj)
            })
            that.dictlist = newData.map((item) => {
              return {
                value: `${item.value}`,
                text: `${item.text}`,
                search: `${item.value}-${item.text}`
              }
            })
            console.log(that.dictlist)
          }
        })
      },

      /** 格式化类型为字典时---格式化参数模糊查询 */
      remoteMethodFormatValue(query) {
        const that = this
        if (query !== "") {
          that.formatValueloading = true;
          setTimeout(() => {
            that.formatValueloading = false;
            that.dictOptions = that.dictlist.filter((item) => {
              return item.search.toLowerCase().indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          that.dictOptions = [];
        }
      },

      /** 取消 */
      handleDefDataCancel() {
        const that = this
        that.defDataDialogFormVisible = false
        that.tableName = ''
        that.defDataForm = {
          field: '',
          title: '',
          minWidth: '',
          fixed: '',
          align: 'center',
          sortable: '0',
          formatType: '',
          formatValue: '',
          visiable: '1',
          sortOrder: '',
          tableCode: '',
          id: ''
        }
        that.$refs.defDataForm.resetFields()
      },

      /** 确定 */
      handleDefDataSubmit() {
        const that = this
        that.$refs['defDataForm'].validate(async valid => {
          if (valid) {
            if(that.defDataForm.formatType) {
              if (!that.defDataForm.formatValue && that.defDataForm.formatValue != 0) {
                that.$message.warning('格式化参数不能为空！')
                return false
              }
            }
            let res = await addDefColumn(that.defDataForm)
            if (res.code == 0) {
              that.$message.success('添加列配置成功！')
              that.handleDefDataCancel()
              that.$emit("updateDefDataList")
            } else {
              that.$message.error(res.message)
            }
          }
        })
      }
    }
}
</script>
<style lang="scss" scoped>
.addDefData /deep/ .el-input-number .el-input__inner {
  text-align: left;
}
.item {
  width: 50%;
  float: left;
}
.addDefData /deep/ .el-form {
  overflow: hidden;
}
.txt {
  float: left;
}
.val {
  float: right;
  color: #8492a6;
  font-size: 13px;
}
.addDefData /deep/ .el-input__inner {
  width: 300px;
}
.addDefData /deep/ .el-input-number {
  width: 300px;
}
/deep/ .el-dialog__header {
  padding: 4px 10px 4px;
}
/deep/ .el-dialog__headerbtn {
  top: 10px;
}
/deep/.el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}
/deep/ .el-dialog__footer {
  padding: 5px 10px 5px;
}               
</style>
